<?php

// registrar scripts y css
function registrar_prueba_css_js($hook) {

    if ($hook == 'parametros_page_pruebas') {
        wp_enqueue_script('pruebas-js', get_template_directory_uri() . '/js/parametros/pruebas.js');
        wp_enqueue_style('formularios-css', get_template_directory_uri() . '/css/formularios.css');

        //estas son variables que puedo usar en los scripts
        wp_localize_script('pruebas-js', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php')));
    }
}

add_action('admin_enqueue_scripts', 'registrar_prueba_css_js', 10, 1);

// register settings function


function registrar_pruebas() {
//        global $pruebas;

    if (!get_option('pruebas')) {
        $pruebas = array();
        add_option('pruebas', $pruebas, '', 'yes');
    }

//        $pruebas = get_option('pruebas');
//       delete_option('pruebas');
}

//FUNCION QUE SE EJECUTA AL INGRESAR POR PRIMERA VEZ AL FORMULARIO
function mostrar_pruebas() {
    ?>

    <div style="position: relative;">
        <div class="wrap" style="box-shadow: 0 0 2px 0 black; display: inline-block; margin: 10px; padding: 10px 80px 40px;">
    <?php mostrar_fomulario_pruebas(); ?>

            <div class="listado-pruebas">
                <div class = "icon32 icon32-bws" id = "icon-options-general"></div>
                <h2>Listado de Personas</h2>
                <br/>
                <div class="lista" >
    <?php mostrar_tabla_pruebas(); ?>
                </div>

                <br/>
                <label class="agregar button-primary">+ Agregar</label>
                <br/><br/>
            </div>
        </div>
    </div>
    <?php
}

add_action('wp_ajax_guardar_prueba', 'guardar_prueba_ajax');

function guardar_prueba_ajax() {

    $pruebas = get_option('pruebas');

    //Controlamos que todos los campos requeridos esten cargados y cargamos el array a guardar

    $prueba['apellido'] = $_POST['apellido'];

    $prueba['nombre'] = $_POST['nombre'];

    $prueba['telefono'] = $_POST['telefono'];


    //SI TODO ES CORRECTO GUARDAMOS LOS CAMPOS

    if ($_POST['id'] != '') {
        $pruebas[$_POST['id']] = $prueba;
    } else {
        if (!count($pruebas == '')) {
            $pruebas['0'] = $prueba;
        } else {
            $pruebas[] = $prueba;
        }
    }

    update_option('pruebas', $pruebas);
    mostrar_tabla_pruebas();

    die();
}

add_action('wp_ajax_eliminar_prueba', 'eliminar_prueba_ajax');

function eliminar_prueba_ajax() {

    $pruebas = get_option('pruebas');
    unset($pruebas[$_POST['id']]);

    update_option('pruebas', $pruebas);

    mostrar_tabla_pruebas();

    die();
}

function mostrar_fomulario_pruebas() {

    ?>
    <div id = "popup"> 
        <div class="close"></div>
        <div id="alta-prueba"> 

            <div class="icon32" id="icon-options-general"></div>
            <h2>Agregar Persona</h2>

            <br/>
            <form method="post" action="admin.php?page=pruebas">
                <table>
                    <tr>
                        <td>ID:</td><td><input class="id" type="text" name="id" size="6" disabled style="text-align: center; background-color: #F2F2F2;"/></td>
                    </tr>
                    <tr>
                        <td>Apellido:</td><td><input class="apellido" type="text" name="apellido" size="50"/></td>
                    </tr>
                    <tr>
                        <td>Nombre:</td><td><input class="nombre" type="text" name="nombre" size="50"/></td>
                    </tr>
                    <tr>
                        <td>Teléfono:</td><td><input class="telefono" type="text" name="telefono" size="50"/></td>
                    </tr>
                </table>

                                                                                                                                                                                                                                                                                                                                                                        <!-- <input type="hidden" name="prueba_submit" value="submit" />-->
                <p class="submit">
                    <input type="button" name="guardar" class="guardar button-primary" value="Guardar" />
                    <input type="button" name="cancelar" class="cancelar button-primary" value="Cancelar" />
                </p>
            </form>


        </div>
    </div>
    <div id="backgroundPopup"></div><?php
}

function mostrar_tabla_pruebas() {

    $pruebas = get_option('pruebas');
    ?>

    <table class="tabla-pruebas">
        <tr>
            <th style="width: 30px; text-align: center;">Nº</th>
            <th style="width: 30px; text-align: center;">ID</th>
            <th style="width: 200px;">Apellido</th>
            <th style="width: 200px;">Nombre</th>
            <th style="width: 200px;">Teléfono</th>
        </tr>
    <?php
    krsort($pruebas);
    $i = 1;
    ?>
        <?php foreach ($pruebas as $id => $prueba) { ?>
            <tr>
                <td class="t-nro" style="text-align: center;"><?php echo $i; ?></td>
                <td class="t-id" style="text-align: center;"><?php echo $id; ?></td>
                <td class="t-apellido"><?php echo $prueba['apellido']; ?></td>
                <td class="t-nombre"><?php echo $prueba['nombre']; ?></td>
                <td class="t-telefono"><?php echo $prueba['telefono']; ?></td>
                <td><label class="modificar" ></label><input id="M-<?php echo $id; ?>" type="hidden" value="<?php echo $id; ?>" style="display: none;"/></td>
                <td><label class="eliminar" ></label><input id="E-<?php echo $id; ?>" type="hidden" value="<?php echo $id; ?>" style="display: none;"/></td>
            </tr>

        <?php
        $i++;
    }
    ?>
        <div class="cargando" style="display: none; z-index: 999;"><img src="<?php bloginfo('template_url'); ?>/images/loader.gif" alt="mensaje loader"/></div>
    </table>


    <script type="text/javascript">
        jQuery("label.eliminar").click(function() {
            if (confirm('¿Esta seguro que desea eliminar este prueba?')) {
                //AJAX
                var data = {//estos son los datos que paso por $_POST
                    action: 'eliminar_prueba',
                    id: jQuery(this).parent().find('input').val()
                };

                jQuery.ajax({
                    type: "POST",
                    url: ajax_object.ajax_url,
                    data: data,
                    beforeSend: function() {
                        cargando();
                        jQuery('.cargando').fadeIn();
                    },
                    success: function(datos) {
                        //                alert(datos);
                        jQuery('.lista').html(datos);
                    },
                    timeout: 4000,
                    error: function() {
                        alert('No se ha podido establecer la conexión con el servidor.');
                        jQuery('.cargando').fadeOut();

                    }
                });
            }
        });

        jQuery("label.modificar").click(function() {
            loadPopup(); // function show popup 

            jQuery('.id').val(jQuery(this).parent().find('input').val());
            jQuery('.apellido').val(jQuery(this).parent().parent().find('.t-apellido').text());
            jQuery('.nombre').val(jQuery(this).parent().parent().find('.t-nombre').text());
            jQuery('.telefono').val(jQuery(this).parent().parent().find('.t-telefono').text());

        });

        function loadPopup() {
            jQuery("#popup").fadeIn(0500); // fadein popup div
            jQuery("#backgroundPopup").fadeIn(0001);

        }

        function cargando() {

            var w, h; //varibles width y height
            w = jQuery('.tabla-pruebas').width();
            h = jQuery('.tabla-pruebas').height() - 21;
            //            alert(w+' || '+h);
            jQuery('.cargando').css({width: w, height: h, 'line-height': (h + 9) + 'px'});
        }


    </script>
<?php }
?>
